<script setup lang="ts">
import { ref } from 'vue'
import router from '@/router';
import { useQuestionStore } from '@/stores/question';
import type { Question } from '@/api/types/Question';

const store = useQuestionStore()
const uploadInput1 = ref<HTMLElement| null>(null);
const uploadInput2 = ref<HTMLElement| null>(null);
const nextEnable = ref(false);

const handleClick = async () => {
  let json1 = await getJSON(uploadInput1.value as HTMLInputElement)
  let json2 = await getJSON(uploadInput2.value as HTMLInputElement)
  if(!(json1 && json2 && json1checker(json1) && json2checker(json2) && crossChecker(json1, json2))) return
  let questions = json1.data.config.questions
  let answers = json2.paramData.submission.detail.answers
  if(questions.length != 0) {
    store.questions.length = 0
  }
  for(let i = 0 ; i < questions.length ; i++) {
    let question = questions[i]
    let options: string[] = question.choices.map((x: any) => x.description)
    let standard_answer: number = question.choices.map((x: any) => x.id).indexOf(question.standard_answer[0])
    let choice: number
    if(answers[i].question_id == i) {
      choice = answers[i].choice_id[0]
    } else {
      choice = answers.find((x: any) => x.question_id == i)
    }
    if(standard_answer == choice) continue
    let result: Question = {
      description: questions[i].description,
      options: options,
      answer: new Set([standard_answer]),
      explaination: questions[i].explanation,
      choice: new Set()
    }
    store.append(result)
  }
  router.push({path: '/analysis'})
}

async function getJSON(input: HTMLInputElement) {
  if(!input.files) {
    // a dialog pop up
    return undefined
  }
  let file = input.files[0]
  let data = await readFile(file)
  try {
    return JSON.parse(data as string)
  }catch(SyntaxError){
    // a dialog pop up
    return undefined
  }
}

function readFile(file: File) {
  return new Promise((resolve, reject) => {
    let reader = new FileReader()
    reader.onload = () => {
      resolve(reader.result)
    }
    reader.onerror = reject
    reader.readAsText(file)
  })
}

function json1checker(json: any) {
  if(json.data == undefined ||
    json.data.config == undefined ||
    json.data.config.questions == undefined) {
    // a dialog pop up
    console.log('unexpected json1')
    return false
  }
  let questions = json.data.config.questions
  questions.forEach((rawQ: any) => {
    if(rawQ.choice_type == undefined ||
      rawQ.choices == undefined ||
      rawQ.description == undefined ||
      rawQ.standard_answer == undefined) {
        // a dialog pop up
        console.log('unexpected json1')
        return false
    }
    if(json.choice_type != 'single') {
      // a dialog pop up
      console.log('single support')
      return false
    }
  })
  return true
}

function json2checker(json: any) {
  return true
}

function crossChecker(json1: any, json2: any) {
  return true
}

</script>

<template>
  <el-container class="wrapper">
    <el-header class="title">Matrix Practice</el-header>
    <el-main class="main-wrapper">
      <el-row>
        <el-col :span="4">请上传作业详情</el-col>
        <el-col :span="20">
          <input type="file" ref="uploadInput1"/>
        </el-col>
      </el-row>  
      <el-row>
        <el-col :span="4">请上传作业提交记录</el-col>
        <el-col :span="20">
          <input type="file" ref="uploadInput2"/>
        </el-col>
      </el-row>  
      <el-button
        class="upload-button w-50 m-2"
        :type="nextEnable ? 'success' : 'primary'"
        :disable="nextEnable"
        @click="handleClick">分析文件</el-button>
    </el-main>
  </el-container>
</template>

<style scoped>
  .title {
    font-size: 2rem;
    text-align: center;
  }

  .main-wrapper {
    text-align: center;
  }

  .upload-button {
    width: 100%;
  }
</style>